<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数实践</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: #58a;
        }
    </style>
</head>

<body>
    <div id="ad">

    </div>
    <script>
        //1.点击以后div 2s变为粉色
        let ad = document.getElementById('ad');
        ad.addEventListener("click", function () {
            //保存this的值
            // let _this=this
            setTimeout(() => {
                //修改背景颜色
                this.style.background = "pink"
            }, 2000);
        })

        //2.从数组中返回偶数的元素
        const arr = [1, 6, 9, 10, 100, 25]
        //   const result=arr.filter(function(item){
        //        if (item%2===0) {
        //            return true
        //        }else{
        //            return false
        //        }
        //   });

        // const result = arr.filter(item => {
        //     if (item % 2 === 0) {
        //         return true
        //     } else {
        //         return false
        //     }
        // })

         const result = arr.filter(item => item%2===0)
        console.log(result)

        //箭头函数适合于this无关的回调，定时器，数组方法回调
        //箭头函数不适合与this有关的回调，事件回调，对象的方法
    </script>
</body>

</html>